import React, { ReactElement, useContext } from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import Button from '../../../../components/Button';
import { setSelectedItem } from '../../actions';
import { coin } from '../../../../constant/resource';

interface CoinCard {
  index: number;
  price: number;
  name: string;
}

export default ({ index, price, name }: CoinCard): ReactElement => {
  const { state } = useContext(Store);
  const { selectedItemIndex } = state;

  return (
    <Button
      style={styles.container}
      onPress={(): void => setSelectedItem(index)}
    >
      <View
        style={[styles.content, selectedItemIndex === index && styles.selected]}
      >
        <Text style={styles.coinDesc}>{name}</Text>
        <Text style={[styles.coinDesc, styles.coinPrice]}>¥{price}</Text>
      </View>
      <Image source={coin} style={styles.coin} resizeMode="contain" />
    </Button>
  );
};
